<template>
  <div class="author-card-pro">
    <div class="author-main">
      <img
        :src="author.avatar || defaultAvatar"
        :alt="author.name"
        class="avatar"
        @error="onImgError"
      />
      <div class="author-info">
        <div class="name-row">
          <span class="name">{{ author.name }}</span>
          <span class="intro" v-if="author.tagInfo">{{ author.tagInfo }}</span>
          <i v-if="author.verified" class="ri-verified-badge-fill verified" title="已认证"></i>
        </div>
        <div class="bio-inline" v-if="author.bio">{{ author.bio }}</div>
        <div class="social-row">
          <a
            v-if="author.socials?.email"
            :href="`mailto:${author.socials.email}`"
            target="_blank"
            class="social-icon"
            title="邮箱"
          >
            <i class="ri-mail-line"></i>
          </a>
          <a
            v-if="author.socials?.github"
            :href="author.socials.github"
            target="_blank"
            class="social-icon"
            title="GitHub"
          >
            <i class="ri-github-line"></i>
          </a>
          <a
            v-if="author.socials?.bilibili"
            :href="author.socials.bilibili"
            target="_blank"
            class="social-icon"
            title="Bilibili"
          >
            <i class="ri-bilibili-line"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="stats-action-row">
      <div class="site-stats">
        <div class="stat">
          <i class="ri-file-list-3-line stat-icon"></i>
          <span class="stat-label">文章</span>
          <span class="stat-value">{{ siteDays }}</span>
        </div>
        <div class="stat">
          <i class="ri-price-tag-3-line stat-icon"></i>
          <span class="stat-label">标签</span>
          <span class="stat-value">{{ pv }}</span>
        </div>
        <div class="stat">
          <i class="ri-folders-line stat-icon"></i>
          <span class="stat-label">分类</span>
          <span class="stat-value">{{ uv }}</span>
        </div>
      </div>
      <div class="action-bar">
        <button
          class="action-btn like"
          :class="{ active: likedLocal }"
          @click="handleLike"
          :title="likedLocal ? '已点赞' : '为本文点赞'"
        >
          <i :class="likedLocal ? 'ri-heart-3-fill' : 'ri-heart-3-line'"></i>
          <span class="like-text">{{ likesLocal }}</span>
        </button>
        <button class="action-btn appreciate" @click="showQr = true">
          <i class="ri-gift-line"></i>
          <span>赞赏</span>
        </button>
        <button class="action-btn share" @click="copyLink">
          <i class="ri-share-forward-line"></i>
          <span>分享</span>
        </button>
        <div class="copyright-btn-wrapper">
          <button
            class="action-btn copyright"
            @mouseenter="showCopyrightTip = true"
            @mouseleave="showCopyrightTip = false"
          >
            <i class="ri-copyright-line"></i>
          </button>
          <div v-if="showCopyrightTip" class="copyright-tip">
            <div>{{ copyright }}</div>
            <div v-if="correctness" class="correctness">{{ correctness }}</div>
          </div>
          <button class="action-btn tip" @mouseenter="showTip = true" @mouseleave="showTip = false">
            <i class="ri-information-line"></i>
          </button>
          <div v-if="showTip" class="copyright-tip">
            文章内容如有疏漏或错误，欢迎大家留言指正，感谢支持！
          </div>
        </div>
      </div>
    </div>
    <!-- 打赏弹窗（全屏遮罩） -->
    <teleport to="body">
      <div v-if="showQr" class="qr-modal" @click.self="showQr = false">
        <div class="qr-content">
          <div class="qr-tabs">
            <button :class="{ active: qrTab === 'wechat' }" @click="qrTab = 'wechat'">微信</button>
            <button :class="{ active: qrTab === 'alipay' }" @click="qrTab = 'alipay'">
              支付宝
            </button>
          </div>
          <img
            :src="qrTab === 'wechat' ? wechatQr : alipayQr"
            :alt="qrTab === 'wechat' ? '微信赞赏码' : '支付宝赞赏码'"
          />
          <div class="qr-tip">请扫码赞赏支持作者</div>
          <!-- 打赏记录表格 -->
          <div class="appreciation-table-wrapper">
            <table class="appreciation-table">
              <thead>
                <tr>
                  <th>昵称</th>
                  <th>金额</th>
                  <th>时间</th>
                  <th>备注</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in appreciationListStatic.slice(0, 10)" :key="item.id">
                  <td>
                    <a v-if="item.link" :href="item.link" target="_blank">{{ item.nickname }}</a>
                    <span v-else>{{ item.nickname }}</span>
                  </td>
                  <td>{{ item.amount }} 元</td>
                  <td>{{ item.time }}</td>
                  <td>{{ item.remark || '-' }}</td>
                </tr>
                <tr v-if="!appreciationListStatic.length">
                  <td colspan="4" class="empty">暂无打赏记录</td>
                </tr>
              </tbody>
            </table>
          </div>
          <button class="close-btn" @click="showQr = false"><i class="ri-close-line"></i></button>
        </div>
      </div>
    </teleport>
    <div class="nav-row">
      <button v-if="prev" class="nav-btn prev" @click="$emit('nav', prev)">
        <i class="ri-arrow-left-line"></i> 上一篇：{{ prev.title }}
      </button>
      <button v-if="next" class="nav-btn next" @click="$emit('nav', next)">
        下一篇：{{ next.title }} <i class="ri-arrow-right-line"></i>
      </button>
    </div>
    <teleport to="body">
      <transition name="fade">
        <div v-if="copySuccess" class="global-toast">链接已复制到剪贴板</div>
      </transition>
    </teleport>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import wechatQr from '@/assets/images/upy.png'
import alipayQr from '@/assets/images/upy.png' // 可替换为支付宝二维码
import { likeContent, cancelLikeContent } from '@/api/article'

const props = defineProps({
  author: { type: Object, required: true },
  // 当前文章ID（用于点赞接口）
  articleId: { type: String, default: '' },
  prev: { type: Object, default: null },
  next: { type: Object, default: null },
  appreciationList: { type: Array, default: () => [] },
  copyright: { type: String, default: '本文为博主原创，转载请注明出处。' },
  correctness: { type: String, default: '' },
  liked: { type: Boolean, default: false },
  likes: { type: Number, default: 0 },
  // 新增：站点统计（运行天数/PV/UV）
  stats: {
    type: Object,
    // 改为文章/标签/分类计数
    default: () => ({ articleCount: 0, tagCount: 0, categoryCount: 0 }),
  },
})

const defaultAvatar = 'https://picsum.photos/id/1005/100/100'
const avatarError = ref(false)
function onImgError(e) {
  if (!avatarError.value) {
    e.target.src = defaultAvatar
    avatarError.value = true
  }
}
// 使用父组件传入的统计数据（文章/标签/分类）
const siteDays = computed(() => props.stats?.articleCount ?? 0)
const pv = computed(() => props.stats?.tagCount ?? 0)
const uv = computed(() => props.stats?.categoryCount ?? 0)
const showQr = ref(false)
const copySuccess = ref(false)
const currentUrl = computed(() => (typeof window !== 'undefined' ? window.location.href : ''))
async function copyLink() {
  try {
    await navigator.clipboard.writeText(currentUrl.value)
    copySuccess.value = true
    setTimeout(() => (copySuccess.value = false), 2000)
  } catch {
    // 复制失败可选处理
  }
}
// 点赞本地状态
const likedLocal = ref(false)
const likesLocal = ref(0)
onMounted(() => {
  likedLocal.value = !!props.liked
  likesLocal.value = typeof props.likes === 'number' ? props.likes : 0
})
// 当父组件异步更新点赞状态/数量时，同步本地显示
watch(
  () => [props.liked, props.likes],
  ([liked, likes]) => {
    likedLocal.value = !!liked
    likesLocal.value = typeof likes === 'number' ? likes : 0
  },
  { immediate: false },
)
async function handleLike() {
  const contentId = props.author?.currentArticleId || props.articleId || null
  const likeType = 0
  // 乐观更新
  const prevLiked = likedLocal.value
  const prevLikes = likesLocal.value
  likedLocal.value = !prevLiked
  likesLocal.value = prevLikes + (likedLocal.value ? 1 : -1)
  try {
    if (likedLocal.value) {
      await likeContent(contentId, likeType)
    } else {
      await cancelLikeContent(contentId, likeType)
    }
  } catch (e) {
    // 失败回滚
    likedLocal.value = prevLiked
    likesLocal.value = prevLikes
  }
}
const showCopyrightTip = ref(false)
const showTip = ref(false)
const qrTab = ref('wechat')
// 静态打赏记录数据
const appreciationListStatic = [
  {
    id: 1,
    nickname: '小王',
    amount: 10,
    time: '2024-06-01',
    link: 'https://github.com/',
    remark: '加油！',
  },
  { id: 2, nickname: '匿名', amount: 5, time: '2024-06-02', remark: '' },
  {
    id: 3,
    nickname: '小李',
    amount: 20,
    time: '2024-06-03',
    link: 'https://bilibili.com/',
    remark: '支持原创',
  },
  { id: 4, nickname: '支持者', amount: 8, time: '2024-06-04' },
  { id: 5, nickname: 'Coder', amount: 15, time: '2024-06-05', remark: '很棒的文章' },
  { id: 6, nickname: '小明', amount: 12, time: '2024-06-06', remark: '' },
  { id: 7, nickname: '小红', amount: 6, time: '2024-06-07', remark: '继续加油' },
  { id: 8, nickname: '小蓝', amount: 18, time: '2024-06-08', remark: '学习了' },
  { id: 9, nickname: '小绿', amount: 9, time: '2024-06-09' },
  { id: 10, nickname: '小紫', amount: 25, time: '2024-06-10', remark: '感谢分享' },
]
</script>

<style lang="scss" scoped>
.author-card-pro {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--border-color-light, #e9eef5);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  padding: 20px 18px 16px 18px;
  margin: 0 auto;
  min-width: 0;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
  position: relative;
  /* 作为滚动目标时，给头部留出空间（移动端更小一些） */
  scroll-margin-top: 84px;
}
.author-main {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  width: 100%;
  .avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #edf1f7;
    background: #fff;
    box-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
    transition:
      box-shadow 0.18s,
      transform 0.18s;
    &:hover {
      box-shadow: 0 8px 22px rgba(17, 24, 39, 0.12);
      transform: scale(1.04);
    }
  }
  .author-info {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    flex: 1;
    .name-row {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      justify-content: flex-start;
      .name {
        font-size: 20px;
        font-weight: 700;
        color: #23272f;
        letter-spacing: 0.01em;
      }
      .intro {
        font-size: 12px;
        color: #98a2b3;
        font-weight: 400;
        margin-left: 8px;
        letter-spacing: 0.01em;
        white-space: nowrap;
      }
      .verified {
        color: #3b82f6;
        font-size: 1.1em;
      }
    }
    .bio-inline {
      font-size: 13px;
      color: #8b95a7;
      font-weight: 400;
      margin-left: 2px;
      letter-spacing: 0.01em;
      margin-top: 2px;
    }
    .social-row {
      display: flex;
      gap: 10px;
      margin-top: 2px;
      .social-icon {
        color: #9aa6b2;
        font-size: 18px;
        transition: color 0.18s;
        &:hover {
          color: #3b82f6;
        }
      }
    }
  }
}
.stats-action-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 12px;
  gap: 12px;
  @media (max-width: 600px) {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
}
.site-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  .stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f7fb;
    border: 1px solid #eef2f6;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    color: #6b7280;
    .stat-icon {
      color: #3b82f6;
      font-size: 14px;
      margin-right: 2px;
    }
    .stat-label {
      color: #94a3b8;
      font-size: 12px;
      margin-right: 2px;
    }
    .stat-value {
      color: #0ea5e9;
      font-size: 14px;
      font-weight: 700;
      margin-left: 2px;
      letter-spacing: 0.01em;
    }
  }
}
.action-bar {
  display: flex;
  gap: 5px;
  .action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: #59708a;
    background: transparent;
    border: 1px solid #e6edf5;
    border-radius: 8px;
    padding: 0 12px;
    height: 34px;
    min-width: 0;
    cursor: pointer;
    transition:
      background 0.18s,
      color 0.18s,
      border-color 0.18s,
      box-shadow 0.18s;
    &:hover {
      background: #3b82f6;
      border-color: #3b82f6;
      color: #fff;
    }
    i {
      font-size: 1.1em;
    }
    &.like {
      border-color: rgba(255, 88, 88, 0.35);
      color: #ff5858;
      background: rgba(255, 88, 88, 0.04);
    }
    &.like .like-text {
      font-weight: 600;
    }
    &.like i {
      font-size: 1.2em;
      transition: transform 0.18s ease, color 0.18s ease;
    }
    &.like:hover {
      background: rgba(255, 88, 88, 0.12);
      border-color: rgba(255, 88, 88, 0.55);
      color: #ff4d4f;
    }
    &.like.active {
      background: linear-gradient(135deg, #ff8a8a 0%, #ff5858 100%);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 6px 18px rgba(255, 88, 88, 0.25);
    }
    &.like.active i {
      transform: scale(1.07);
    }
  }
  .like {
    color: #ff7a45;
    border-color: rgba(255, 122, 69, 0.25);
    &:hover {
      background: #ff7a45;
      color: #fff;
    }
  }
  .appreciate {
    color: #e6a100;
    border-color: rgba(247, 181, 0, 0.35);
    &:hover {
      background: #f7b500;
      color: #fff;
    }
  }
  .share {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.35);
    &:hover {
      background: #3b82f6;
      color: #fff;
    }
  }
  .copyright {
    color: #7a8599;
    border-color: #e6edf5;
    &:hover {
      color: #3b82f6;
      background: rgba(59, 130, 246, 0.1);
    }
  }
  .copyright-btn-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    .copyright-tip {
      position: absolute;
      left: 50%;
      top: 110%;
      transform: translateX(-50%);
      min-width: 180px;
      max-width: 260px;
      background: #fff;
      color: #23272f;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(81, 138, 255, 0.13);
      padding: 12px 16px;
      font-size: 13px;
      z-index: 10;
      white-space: pre-line;
      word-break: break-all;
      line-height: 1.6;
      .correctness {
        margin-top: 6px;
        color: #f7b500;
        font-size: 12px;
      }
    }
  }
  .tip {
    color: #518aff;
    background: rgba(81, 138, 255, 0.04);
    margin-left: 4px;
    &:hover {
      color: #f7b500;
      background: rgba(247, 181, 0, 0.13);
    }
  }
}
.copy-success-tip {
  margin-left: 10px;
  color: #4caf50;
  font-size: 13px;
  background: rgba(76, 175, 80, 0.08);
  border-radius: 6px;
  padding: 2px 10px;
  box-shadow: 0 1px 4px rgba(76, 175, 80, 0.07);
  transition: opacity 0.2s;
  position: relative;
  top: 1px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.qr-modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.18);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-content {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(81, 138, 255, 0.13);
  padding: 32px 38px 24px 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 400px;
  max-width: 96vw;
}
.qr-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  button {
    background: #f7faff;
    border: none;
    border-radius: 6px 6px 0 0;
    padding: 6px 22px;
    font-size: 15px;
    color: #518aff;
    font-weight: 500;
    cursor: pointer;
    transition:
      background 0.18s,
      color 0.18s;
    &.active {
      background: #518aff;
      color: #fff;
    }
  }
}
.qr-content img {
  width: 180px;
  height: 180px;
  border-radius: 10px;
  margin-bottom: 12px;
}
.qr-tip {
  color: #518aff;
  font-size: 15px;
  margin-bottom: 8px;
}
.close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  background: none;
  border: none;
  color: #888;
  font-size: 20px;
  cursor: pointer;
}
.appreciation-table-wrapper {
  margin-top: 12px;
  width: 100%;
  max-width: 320px;
  overflow-x: auto;
  max-height: 220px;
  overflow-y: auto;
  // 滚动条美化
  &::-webkit-scrollbar {
    width: 7px;
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background: #e3e8ee;
    border-radius: 6px;
    transition: background 0.2s;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #b3c6e2;
  }
}
.appreciation-table {
  width: 100%;
  border-collapse: collapse;
  th,
  td {
    border-bottom: 1px solid #f0f0f0;
    padding: 6px 8px;
    font-size: 13px;
    text-align: left;
  }
  th {
    color: #518aff;
    background: #f7faff;
  }
  .empty {
    text-align: center;
    color: #aaa;
    font-size: 13px;
  }
}
:root.dark .appreciation-table-wrapper::-webkit-scrollbar-thumb {
  background: #2a3550;
}
:root.dark .appreciation-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #3d4e6e;
}
.nav-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  .nav-btn {
    flex: 1;
    background: var(--bg-color-light, #f7faff);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    font-size: 14px;
    color: #518aff;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    transition:
      box-shadow 0.2s,
      background 0.18s,
      color 0.18s;
    &:hover {
      background: #518aff;
      color: #fff;
    }
    &.prev {
      justify-content: flex-start;
    }
    &.next {
      justify-content: flex-end;
    }
  }
}
@media (max-width: 600px) {
  .author-card-pro {
    padding: 12px 10px 14px 10px;
    border-radius: 12px;
    max-width: 100vw;
    scroll-margin-top: 68px;
  }
  .author-main {
    gap: 8px;
    .avatar {
      width: 52px;
      height: 52px;
    }
    .author-info {
      gap: 5px;
      .name-row .name {
        font-size: 16px;
      }
      .name-row .intro {
        font-size: 12px;
        margin-left: 4px;
      }
      .bio-inline {
        font-size: 11px;
      }
      .social-row .social-icon {
        font-size: 15px;
      }
    }
  }
  .stats-action-row {
    flex-direction: column;
    gap: 20px;
  }
  .site-stats {
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    &::-webkit-scrollbar { display: none; } /* WebKit */
    .stat {
      white-space: nowrap;
      font-size: 12px;
      padding: 4px 8px;
      .stat-icon { font-size: 13px; }
      .stat-value { font-size: 12px; }
    }
  }
  .action-bar {
    gap: 6px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: visible;
    white-space: normal;
    .action-btn {
      font-size: 13px;
      padding: 0 6px;
      min-width: 48px;
      height: 32px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      box-sizing: border-box;
      i {
        font-size: 15px;
      }
    }
  }
  .qr-content {
    padding: 14px 4px 10px 4px;
    min-width: 240px;
    max-width: 98vw;
  }
  .qr-content img {
    width: 120px;
    height: 120px;
  }
  .qr-tip {
    font-size: 12px;
  }
  .nav-row {
    flex-direction: column;
    gap: 10px;
    .nav-btn {
      font-size: 12px;
      padding: 8px 8px;
    }
  }
}
:root.dark .author-card-pro {
  background: linear-gradient(120deg, rgba(35, 35, 41, 0.96) 60%, rgba(40, 48, 70, 0.92) 100%);
}
:root.dark .site-stats .stat {
  background: rgba(81, 138, 255, 0.13);
  color: #7daaff;
}
:root.dark .action-bar .action-btn {
  background: rgba(81, 138, 255, 0.13);
  color: #7daaff;
}
:root.dark .action-bar .action-btn.like {
  background: rgba(255, 122, 69, 0.13);
  color: #ffb899;
}
:root.dark .action-bar .action-btn.appreciate {
  background: rgba(247, 181, 0, 0.13);
  color: #ffe08a;
}
:root.dark .action-bar .action-btn.copyright {
  background: rgba(81, 138, 255, 0.08);
  color: #7a8599;
}
:root.dark .copyright-btn-wrapper .copyright-tip {
  background: #23272f;
  color: #fff;
}
:root.dark .nav-row .nav-btn {
  background: #23272f;
  color: #7daaff;
}
.global-toast {
  position: fixed;
  left: 50%;
  top: 18%;
  transform: translate(-50%, 0);
  background: rgba(81, 138, 255, 0.97);
  color: #fff;
  font-size: 15px;
  padding: 10px 28px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(81, 138, 255, 0.13);
  z-index: 99999;
  pointer-events: none;
  transition: opacity 0.2s;
}
</style>
